import React,{Component} from 'react'

import {Icon} from 'antd'

class Type extends Component{
    constructor(props){
        super(props)
        this.state={
            serveList:props.serveList,
            ishow:false

        }
    }
    delete(item){
        let arr=this.state.serveList
        let oIndex=arr.indexOf(item)
        arr.splice(oIndex,1)
        this.props.update(this.state.serveList,arr)
    }
    handleditor(){
        this.setState(prevState=>({
            ishow:!prevState.ishow
        })); 
    }
    render(){
        return(
            <div className="ty-li">
                <label className="require">服务标签</label>
                <div className="type">
                    <div className="con">
                        <div className="type-l">
                        {
                            this.state.serveList.map((item,index)=>(
                                <div className="type-list"  key={index}>
                                    {item}
                                    <span onClick={(item)=>this.delete(item)} className={this.state.ishow?'':'hide'}>x</span>
                                </div>
                            ))
                        }
                        </div>
                    </div>
                    <div className="footer">
                        <div className="type-tit">
                                <div onClick={this.props.onClick}><Icon type="plus" />增加属性</div>
                                <div onClick={()=>this.handleditor()}>编辑</div>
                        </div>                            
                    </div>
                </div>
        </div>
        )
    }
}
export default Type